<template>
  <div>
    <icon-nav
      :title="title"
      :label="extend.series.label"
      :isCharts="isCharts"
      @changeCharts="isCharts = isCharts?false:true"
      @clickSetting="$refs.setting.show()"
    ></icon-nav>
    <ve-histogram
      v-if="isCharts"
      :data="chartData"
      :settings="chartSettings"
      :height="height"
      :width="width"
      :extend="extend"
      :data-zoom="dataZoom"
    ></ve-histogram>
    <v-table v-else :chartData="chartData" :chartSettings="chartSettings"></v-table>
    <setting
      ref="setting"
      :title="'图表-'+title"
      :chartData="chartData"
      :chartSettings="chartSettings"
      :radioList="[{label:0,name:'只按PPC计算'},{label:1,name:'只按Promotion计算'},{label:2,name:'按PPC+Promotion计算'}]"
      radioName="成交成本计算方式"
    ></setting>
  </div>
</template>
<script>
import setting from "./setting";
import VeLine from "v-charts/lib/line.common";
import veHistogram from "v-charts/lib/histogram.common";
import amap from "v-charts/lib/amap.common";
import vTable from "./table";
import iconNav from "./iconNav";

export default {
  components: {
    setting,
    veHistogram,
    vTable,
    iconNav
  },
  props: {
    title: {
      type: String,
      default: "4营销维度曲线"
    },
    dataList: {
      type: Array
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    }
  },
  data() {
    return {
      isCharts: true,
      extend: {
        series: {
          barMaxWidth: 20,
          label: {
            show: false,
            position: "top"
          }
        }
      },
      chartSettings: {
        showLine: [
          "productPPCOfSales",
          "sitePPCOfSales",
          "totalPPCOfSales",
          "productPromotionOfSales",
          "sitePromotionOfSales",
          "totalPromotionOfSales",
          "productMarketingOfSales",
          "siteMarketingOfSales",
          "totalMarketingOfSales"
        ],
        axisSite: {
          right: [
            "productPPCOfSales",
            "sitePPCOfSales",
            "totalPPCOfSales",
            "productPromotionOfSales",
            "sitePromotionOfSales",
            "totalPromotionOfSales",
            "productMarketingOfSales",
            "siteMarketingOfSales",
            "totalMarketingOfSales"
          ]
        },
        scale: true,
        yAxisName: ["", "%"],
        labelMap: {
          week: "日期",
          productPPCOfSales: "产品ppc营销占比(%)",
          sitePPCOfSales: "站点ppc营销占比(%)",
          totalPPCOfSales: "总ppc营销占比(%)",
          productPromotionOfSales: "产品促销营销占比(%)",
          sitePromotionOfSales: "站点促销营销占比(%)",
          totalPromotionOfSales: "总促销营销占比(%)",
          productMarketingOfSales: "产品营销费用占比(%)",
          siteMarketingOfSales: "站点营销费用占比(%)",
          totalMarketingOfSales: "总营销费用占比(%)",
          product: "产品成交成本",
          site: "站点成交成本",
          total: "总成交成本"
        }
      },
      chartData: {
        columns: ["week", "productPromotionOfSales", "product"],
        rows: [],
        radioId: 2,
        radioList: ["product", "site", "total"]
      },
      dataZoom: {
        type: "slider",
        show: true,
        startValue: 10, //数据窗口范围的起始数值
        endValue: 0,
        height: 10,
        bottom: 40
      }
    };
  },
  watch: {
    dataList: {
      handler(newValue, oldValue) {
        let rows = [];
        newValue.forEach(item => {
          item.productList = [
            item.productTransactionCostToPPC,
            item.productTransactionCostToPromotion,
            item.productTransactionCostToAll
          ];
          item.siteList = [
            item.siteTransactionCostToPPC,
            item.siteTransactionCostToPromotion,
            item.siteTransactionCostToAll
          ];
          item.totalList = [
            item.totalTransactionCostToPPC,
            item.totalTransactionCostToPromotion,
            item.totalTransactionCostToAll
          ];
          item.product = item.productTransactionCostToAll;
          item.site = item.siteTransactionCostToAll;
          item.total = item.totalTransactionCostToAll;
          rows.push(item);
        });
        this.chartData.rows = rows;
      },
      deep: true
    }
  }
};
</script>

